<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
    <div id="app">

        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        <script>
            new Vue({
                el:'#app',
                data() {
                    return {
                        /*data: [{label: '一级 1', children: [{label: '二级 1-1', children: [{label: '三级 1-1-1'}]}]},
                               {label: '一级 2', children: [{label: '二级 2-1', children: [{label: '三级 2-1-1'}]}]},
                               {label: '一级 3', children: [{label: '二级 3-1', children: [{label: '三级 3-1-1'}]}]}
                               ],*/
                        data: [{label: '一级 1', children: [{label: '二级 1-1', children: [{label: '三级 1-1-1'}]}]},
                               {label: '一级 2', children: [{label: '二级 2-1', children: [{label: '三级 2-1-1'}]},
                               {label: '二级 2-2', children: [{label: '三级 2-2-1'}]}]},
                               {label: '一级 3', children: [{label: '二级 3-1', children: [{label: '三级 3-1-1'}]},
                               {label: '二级 3-2', children: [{label: '三级 3-2-1'}]}]}
                        ],
                        defaultProps: {
                            children: 'children',
                            label: 'label'
                        }
                    };
                },
                methods: {
                    handleNodeClick(data) {
                        console.log(data);
                    }
                }
            });
        </script>
    </div>


</body>
</html>